<template>
  <div class="page">
    <el-page-header @back="back()" content="销售统计报表页面" style="margin-bottom: 10px;"/>
    <div class="sale-report">
      <DateRange class="date-range" :handle-date-change="handleDateChange"></DateRange>
      <Charts  :data-source="dataSet.dataSource" :chart-type="chartType" :size="size" :index="'101'"/>
    </div>
  </div>
</template>

<script>
import Charts from "../Charts";
import moment from 'moment';
import {loadSaleReportDataSet} from "../statement";
import DateRange from "../../../common/DateRange";
export default {
  name: "SaleReport",
  components: {Charts,DateRange},
  data(){
    return {
      size:"width:70vw;height:50vh;",
      dataSet:[],
      chartType:this._mytype.chartType.LINE,
      start:moment().format('YYYY-MM-01'),
      end:moment(moment().endOf("month")).format('YYYY-MM-DD'),
    }
  },
  created() {
    this.loadDataSet();
  },
  methods:{
    back(){
      this.$router.back();
    },
    handleDateChange(value){
      this.start=value[0];
      this.end=value[1];
      this.loadDataSet();
    },
    loadDataSet(){
      loadSaleReportDataSet(this.start,this.end).then(resp=>{
        this.dataSet=resp.data;
      })
    }
  }
}
</script>

<style scoped>
.sale-report{
  padding: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.date-range{

}
</style>
